import { ExpertAppointmentTimesProps } from '@/api/expert';
import { Text, View } from '@tarojs/components';
import { useToggle } from 'ahooks';
import classNames from 'classnames';
import dayjs from 'dayjs';
import { useMemo, useState } from 'react';

import { AtCalendar } from 'taro-ui';
import 'taro-ui/dist/style/components/calendar.scss';

export default function useDateSelecor(props: {
  dates: ExpertAppointmentTimesProps[];
}) {
  const [mode, { toggle }] = useToggle('default', 'calendar');
  const [selectedTimes, setSelectTimes] = useState<number[]>([]);
  const [selectDate, setSelectDate] = useState<string>();

  const selectSourceData = useMemo(
    () => props.dates?.find((i) => i.date === selectDate),
    [selectDate, props.dates]
  );

  function renderNode() {
    return (
      <>
        <View className='flex items-center mb-4'>
          <Text className=' block text-base text-black font-bold leading-none'>
            选择日期
          </Text>
          <View
            className=' text-xs text-primary ml-auto flex items-center leading-none'
            onClick={() => {
              toggle();
            }}
          >
            <View
              className='w-[32px] h-[32px] bg-cover mr-1'
              style={{
                backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-date.svg)`,
              }}
            />
            {mode === 'calendar' ? '收起' : '全部日期'}
          </View>
        </View>
        {mode === 'default' && (
          <View className=' flex overflow-auto'>
            {props.dates?.map((item, index) => (
              <View
                key={index}
                onClick={() => setSelectDate(item.date)}
                className={classNames(
                  'flex-shrink-0 border-4 border-solid border-gary3 text-center inline-block p-2 rounded-lg mr-2 leading-none',
                  {
                    'border-primary bg-[#EFF3FA] text-primary':
                      item.date === selectDate,
                  }
                )}
              >
                <Text
                  className={classNames('text-xs text-gary3', {
                    'text-primary': item.date === selectDate,
                  })}
                >
                  {item.week}
                </Text>
                <Text
                  className={classNames(
                    'font-bold text-black text-lg block mt-1',
                    {
                      'text-primary': item.date === selectDate,
                    }
                  )}
                >
                  {dayjs(item.date).format('MM-DD')}
                </Text>
              </View>
            ))}
          </View>
        )}

        {mode === 'calendar' && (
          <AtCalendar
            validDates={props.dates.map((i) => ({ ...i, value: i.date }))}
            className=' border-2 border-solid border-[#EFF3FA] mb-4 p-4 rounded-lg'
            minDate={dayjs().format('YYYY-MM-DD')}
            onDayClick={(e) => {
              setSelectDate(e.value);
            }}
          />
        )}

        {/* 可选时段 */}
        <View className='flex items-center mt-6 mb-4 leading-none'>
          <Text className=' block text-base text-black font-bold '>
            可选时段
          </Text>
          <Text className=' block text-xs text-gary1'>
            （最多选择3个时段，专家将通过其中之一）
          </Text>
        </View>
        <View className=' space-y-2'>
          {selectSourceData?.list?.map((item) => (
            <View
              onClick={() => {
                const sourceData = [...selectedTimes];

                //追加时间断
                const index = selectedTimes?.findIndex((i) => item.id === i);
                if (index === -1) sourceData.push(item.id);
                else {
                  //移除
                  sourceData.splice(index, 1);
                }

                setSelectTimes(sourceData);
              }}
              key={item.id}
              className={classNames(
                'flex w-full border-4 border-solid border-gary3 text-xs px-4 py-2 rounded-lg',
                {
                  'bg-[#EFF3FA] border-primary text-primary':
                    selectedTimes?.includes(item.id),
                }
              )}
            >
              {item.start_time} - {item.end_time}
              <Text className='ml-auto'>{item.address}</Text>
            </View>
          ))}
        </View>
      </>
    );
  }
  return {
    renderNode,
    setSelectDate,
    selectedTimes,
  };
}
